<template>
	<view>
		<view class="content" v-if="dataList.length < 1">
			<u-empty text="所谓伊喵，早起暴富" mode="list"></u-empty>
		</view>
		<view v-else>
			<u-swipe-action :show="item.show" :index="index" v-for="(item, index) in dataList" :key="item.id"
				@click="click" @open="open" :options="options">
				<view class="item u-border-bottom">
					<image mode="aspectFill" src="/static/images/icon/money.png" />
					<view style="display: flex;width: 100%;">
						<view class="title-wrap" style="flex: 1;margin-right: 3%;">
							<text class="title u-line-2">{{ item.moneyTitle }}</text>
							<text class="title u-line-1">
								额度：{{item.moneyTotal}}
							</text>
							<br />
							<text class="title u-line-1">
								余额：{{item.balanceTotal}}
							</text>
						</view>
						<view class="title-wrap" style="flex: 1;margin-right: 5%;">
							<text class="title u-line-2">共享成员</text>
							<u-avatar v-for="(item,itemIndex) in item.sysUserList" :key="itemIndex" size="40"
								:src="item.avatar"></u-avatar>
						</view>
						<view class="title-wrap" style="flex: 1;">
							<view class="title u-line-2"
								style="display: flex;justify-content: center;align-items: center;">
								<u-icon name="arrow-left-double"></u-icon>
								<text> 向左滑动</text>
							</view>
						</view>
					</view>
				</view>
			</u-swipe-action>
			<u-loadmore status="nomore" />
		</view>
		<u-popup v-model="userListShow" mode="bottom" border-radius="30">
			<view style="display: flex;justify-content: space-between;width: 100%;padding: 3% 3%;">
				<text @click="cancel">取消</text>
				<text style="color: #2979ff;" @click="update">确定</text>
			</view>
			<view>
				<u-divider>现共享成员</u-divider>
				<view style="display: flex;justify-content: center;margin: 3% 0;">
					<u-avatar v-for="(item,itemIndex) in selectedUserList" :key="itemIndex" size="50"
						:src="item.avatar"></u-avatar>
				</view>
				<u-divider>可共享成员</u-divider>
			</view>
			<view class="item u-border-bottom" style="display: flex;flex-wrap: wrap;">
				<view v-for="(user,index) in userList" :key="index"
					:style="{'margin': '3%','background-color':user.selected?'#19be6b':'','border-radius':'50%'}">
					<u-avatar size="default" :src="user.avatar" @click="toggleSelected(user)"></u-avatar>
				</view>
			</view>
		</u-popup>
	</view>
</template>

<script>
	import {
		addConsumption
	} from '@/api/bot/consumption'
	import {
		getMoneyList,
		updateMoney,
		removeMoney
	} from '@/api/bot/money'
	import {
		getListOfNoPage
	} from '@/api/system/user'
	import {
		getGroupOfUser
	} from '@/api/bot/groupInvite'
	import config from '@/config'
	export default {
		name: "Whispers",
		data() {
			return {
				baseUrl: config.baseUrl,
				dataList: [],
				query: {
					pageNum: 1,
					pageSize: 10,
					ownData: true,
					groupId: ''
				},
				disabled: false,
				btnWidth: 180,
				show: false,
				userListShow: false,
				userList: [],
				currentMoneyData: null,
				selectedUserList: [],
				originalUserList: [],
				userOptions: [{
						text: '共享',
						style: {
							backgroundColor: '#007aff'
						}
					},
					{
						text: '取消',
						style: {
							backgroundColor: '#19be6b'

						}
					},
				],
				options: [{
						text: '详情',
						style: {
							backgroundColor: '#007aff'
						}
					},
					{
						text: '共享',
						style: {
							backgroundColor: '#19be6b'

						}
					},
					{
						text: '删除',
						style: {
							backgroundColor: '#dd524d'
						}
					}
				]
			};
		},
		onLoad() {
			uni.getStorage({
				key: 'groupIdByIndex',
				success: (res) => {
					let data = JSON.parse(res.data);
					this.query.groupId = data.id;
					this.getMoneyList()
					this.getListOfNoPage()
				}
			});
		},
		onPullDownRefresh() {
			this.getMoneyList()
			setTimeout(() => {
				uni.stopPullDownRefresh()
			}, 1500)
		},
		methods: {
			cancel() {
				this.getMoneyList()
				this.userListShow = false
			},
			update() {
				let ids = this.selectedUserList.map(item => item.userId)
				this.currentMoneyData.userIds = ids
				this.currentMoneyData.groupId = this.query.groupId
				updateMoney(this.currentMoneyData).then(res => {
					if (res.code !== 200) {
						this.$modal.msgError("保存失败")
					} else {
						this.getMoneyList()
						this.userListShow = false
						this.$modal.msgSuccess("保存成功")
					}
				})
			},
			updateMoney() {
				updateMoney().then(res => {

				})
			},
			removeMoney(obj) {
				removeMoney(obj).then(res => {
					if (res.code == 200) {
						this.$modal.msgSuccess("删除成功")
						this.getMoneyList()
					} else {
						this.$modal.msgError("删除失败")
					}
				})
			},
			toggleSelected(user) {
				this.$set(user, "selected", !user.selected);
				if (user.selected) {
					this.selectedUserList.push(user);
				} else {
					const index = this.selectedUserList.findIndex(selectedUser => selectedUser.userId === user.userId);
					console.log(index);
					if (index !== -1) {
						this.selectedUserList.splice(index, 1);
					}
				}
				console.log(this.selectedUserList.map(item => item.userId));
			},
			getListOfNoPage() {
				this.userList = []
				let query = {
					groupId: this.query.groupId
				}
				getGroupOfUser(query).then(res => {
					res.rows.forEach(user => {
						const avatar = (user == null || user.avatar == "" || user.avatar == null) ?
							require("@/static/images/profile.jpg") : (user.avatar.includes("http") ?
								user.avatar : this.baseUrl + user.avatar);
						user.avatar = avatar
					})
					this.userList = res.rows
				})
			},
			getMoneyList() {
				uni.showLoading({
					title: '加载中...'
				})
				this.dataList = []
				getMoneyList(this.query).then(res => {
					res.rows.forEach(element => {
						element.avatar = this.baseUrl + element.avatar
						element.percent = (element.balanceTotal / element.moneyTotal * 100).toFixed(0)
						if (element.sysUserList) {
							element.sysUserList.forEach(user => {
								const avatar = (user == null || user.avatar == "" || user.avatar ==
										null) ?
									require("@/static/images/profile.jpg") : (user.avatar.includes(
											"http") ?
										user.avatar : this.baseUrl + user.avatar);
								user.avatar = avatar
							})
						}
					})
					this.dataList = this.dataList.concat(res.rows)
					uni.hideLoading()
				})
			},
			pageToMoneyDetail(item) {
				item.path = 'own';
				const formDataStr = JSON.stringify(item);
				this.$tab.navigateTo('/pages/detail/moneyDetail?formData=' + encodeURIComponent(formDataStr))
			},
			click(index, index1) {
				this.currentMoneyData = this.dataList[index]
				if (index1 == 0) {
					this.dataList[index].show = false;
					this.pageToMoneyDetail(this.dataList[index])
					// this.$u.toast(`查看了第${index}个cell`);
				} else if (index1 == 1) {
					this.dataList[index].show = false;
					const data = this.dataList[index].sysUserList
					this.selectedUserList = []
					if (data) {
						data.forEach(user => {
							const avatar = (user == null || user.avatar == "" || user.avatar ==
									null) ?
								require("@/static/images/profile.jpg") : (user.avatar.includes(
										"http") ?
									user.avatar : this.baseUrl + user.avatar);
							user.avatar = avatar
						})
						this.selectedUserList = data
						this.originalUserList = {
							...data
						}
					}
					for (const user of this.userList) {
						if (data) {
							if (data.some(item => item.userId === user.userId)) {
								user.selected = true;
							} else {
								user.selected = false
							}
						} else {
							user.selected = false
						}
					}
					this.userListShow = true
					// this.$u.toast(`共享了第${index}个cell`);
				} else {
					this.dataList[index].show = false;
					this.$modal.confirm('确定删除该钱袋子吗？').then(() => {
						this.removeMoney(this.dataList[index])
						this.dataList.splice(index, 1);
					})
				}
			},
			// 如果打开一个的时候，不需要关闭其他，则无需实现本方法
			open(index) {
				// 先将正在被操作的swipeAction标记为打开状态，否则由于props的特性限制，
				// 原本为'false'，再次设置为'false'会无效
				this.dataList[index].show = true;
				this.dataList.map((val, idx) => {
					if (index != idx) this.dataList[idx].show = false;
				})
			}
		},
	}
</script>

<style lang="scss" scoped>
	.content {
		flex: 1;
		display: flex;
		justify-content: center;
		align-items: center;
		margin-top: 10%;
	}

	.item {
		display: flex;
		padding: 20rpx;
	}

	image {
		width: 150rpx;
		flex: 0 0 150rpx;
		height: 150rpx;
		margin-right: 20rpx;
		border-radius: 12rpx;
	}

	.title {
		text-align: left;
		font-size: 28rpx;
		color: $u-content-color;
		margin-top: 20rpx;
	}
</style>